<?php defined('BASEPATH') or exit('No direct script access allowed'); ?>
<link rel="stylesheet" href="{{url:base}}media/fileuploader/fileuploader.css" >
<script src="{{url:base}}media/fileuploader/fileuploader.js"></script>

<style>
	#public_top_media, #public_medias, #private_medias{
		float:left;
		min-height:70px;
		width:100%;
	}
	.media-item{
		float:left;
		margin:5px 10px 5px 0px;
		cursor:pointer;
		position:relative;
	}
	.ui-widget-header {
		background: url("{{url:base}}media/jquery-ui/css/custom-theme/images/ui-bg_highlight-soft_75_cccccc_1x100.png") repeat-x scroll 50% 50% #CCCCCC !important;
		border: 1px solid #AAAAAA !important;
		color: #222222 !important;
		font-weight: bold !important;
	}
	.ui-widget {
	   font-size: 0.8em !important;
	}
	.media-edit{
		text-align:center;
		font-weight:bold;
	} 
	.red-border{border:1px solid red!important;}
	.id-info{
		position:absolute;
		width:auto;
		height:15px;
		color:#555555;
		font-weight:bold;
		background:#e6e6e6;
		right:0px;
		bottom:20px;
		padding:0 5px;
	}
</style>

<?php 
	$ci = &get_instance();
	$escort_id = intval($this->input->get('escort_id',TRUE));
	$ESCORT = $ci->escort_entity->init('id',$escort_id);
?>

<div id="async_div_loading">
	<div class="dashboard-info-wrapper">
		<?php echo language_translate('pictures_videos_hint'); ?>
		<div class="clear"></div>
	</div>
	
	<div class="dashboard-info-wrapper">
		<fieldset>
			 <legend><?php echo language_translate('pictures_videos_public_top_media');?></legend>
			 <div id="public_top_media">
				<?php $media_array= $ci->media_entity->getMediaByPermission($ESCORT->getId(), 'public_top');?>
				<?php foreach($media_array as $item):?>
					<?php $MEDIA = $ci->media_entity->init('id',$item->id);?>
						<?php if($MEDIA->getType() == 'image'):?>
							<div class="media-item ui-state-default" id="<?php echo $item->id;?>" title="<?php echo language_translate('pictures_videos_title');?>" rel="image">
								<?php echo thumb($MEDIA->getTargetFileImageTopPublic('big'),THUMB_W,THUMB_H);?>
								<div class="media-edit"><?php echo language_translate('pictures_videos_media_edit');?></div>
							</div>
						<?php else:?>
							<div class="media-item ui-state-default" id="<?php echo $item->id;?>" title="<?php echo language_translate('pictures_videos_title');?>" rel="video">
								<?php echo thumb($MEDIA->getTargetFile('avatar'),THUMB_VW,THUMB_VH);?>
								<div class="media-edit"><?php echo language_translate('pictures_videos_media_edit');?></div>
								<div class="id-info"><?php echo language_translate('media_video_id').$MEDIA->getId();?></div>
							</div>
						<?php endif;?>
				<?php endforeach;?>
			 </div>
		</fieldset>
		<div class="clear"></div>
	</div>

	<div class="dashboard-info-wrapper">
		<fieldset>
			 <legend><?php echo language_translate('pictures_videos_public_media');?></legend>
			 <div id="public_medias">
				<?php $media_array= $ci->media_entity->getMediaByPermission($ESCORT->getId(), 'public');?>
				<?php foreach($media_array as $item):?>
					<?php $MEDIA = $ci->media_entity->init('id',$item->id);?>
						<?php if($MEDIA->getType() == 'image'):?>
							<div class="media-item ui-state-default" id="<?php echo $item->id;?>" title="<?php echo language_translate('pictures_videos_title');?>" rel="image">
								<?php echo thumb($MEDIA->getTargetFileImageTopPublic('big'),THUMB_W,THUMB_H);?>
								<div class="media-edit"><?php echo language_translate('pictures_videos_media_edit');?></div>
							</div>
						<?php else:?>
							<div class="media-item ui-state-default" id="<?php echo $item->id;?>" title="<?php echo language_translate('pictures_videos_title');?>" rel="video">
								<?php echo thumb($MEDIA->getTargetFile('avatar'),THUMB_VW,THUMB_VH);?>
								<div class="media-edit"><?php echo language_translate('pictures_videos_media_edit');?></div>
								<div class="id-info"><?php echo language_translate('media_video_id').$MEDIA->getId();?></div>
							</div>
						<?php endif;?>
				<?php endforeach;?>
			 </div>
		</fieldset>
		<div class="clear"></div>
	</div>

	<div class="dashboard-info-wrapper">
		<fieldset>
			 <legend><?php echo language_translate('pictures_videos_private_media');?></legend>
			 <div id="private_medias">
				<?php $media_array= $ci->media_entity->getMediaByPermission($ESCORT->getId(), 'private');?>
				<?php foreach($media_array as $item):?>
					<?php $MEDIA = $ci->media_entity->init('id',$item->id);?>
						<?php if($MEDIA->getType() == 'image'):?>
							<div class="media-item ui-state-default" id="<?php echo $item->id;?>" title="<?php echo language_translate('pictures_videos_title');?>" rel="image">
								<?php echo thumb($MEDIA->getTargetFileImageTopPublic('big'),THUMB_W,THUMB_H);?>
								<div class="media-edit"><?php echo language_translate('pictures_videos_media_edit');?></div>
							</div>
						<?php else:?>
							<div class="media-item ui-state-default" id="<?php echo $item->id;?>" title="<?php echo language_translate('pictures_videos_title');?>" rel="video">
								<?php echo thumb($MEDIA->getTargetFile('avatar'),THUMB_VW,THUMB_VH);?>
								<div class="media-edit"><?php echo language_translate('pictures_videos_media_edit');?></div>
								<div class="id-info"><?php echo language_translate('media_video_id').$MEDIA->getId();?></div>
							</div>
						<?php endif;?>
				<?php endforeach;?>
			 </div>
		</fieldset>
		<div class="clear"></div>
		<input type="checkbox" class="custom" name="image_face_censor" id="image_face_censor" value="<?php echo $ESCORT->getImageFaceCensor();?>" <?php if($ESCORT->getImageFaceCensor() ==1){echo 'checked="checked"';} ?>/>
		<?php echo language_translate('pictures_videos_image_face_censor');?>
	</div>

</div>

<div class="dashboard-info-wrapper">
	<div class="dashboard-info-left"> 
		<div class="select-box">
			<input type="button" class="save-button" value="<?php echo language_translate('pictures_videos_save');?>" id="button_save_action" /> 
			<div class="clear"></div>
			<?php echo loader_image("id='save_loader_image' class='hidden' style='margin-top:15px;'");?>
		</div>
	</div>
	<div class="dashboard-info-right"> 
		<div class="select-box">
			<input type="button" class="save-button" value="<?php echo language_translate('pictures_videos_button_add_new_image');?>" id="button_add_new_image" /> 
		</div>
	</div>
	<div class="clear"></div>
</div>	 

<div class="dashboard-info-wrapper">
	<div class="dashboard-info-left"><span>&nbsp;</span></div>
	<div class="dashboard-info-right">
		<div class="link-box">
			<a href="javascript:void(0);" onclick="return open_question_dialog(<?php echo $ESCORT->getUserId();?>);"><?php echo language_translate('pictures_videos_question');?></a>
		</div>
		<div class="clear"></div>
	</div>
	<div class="clear"></div>
</div>

<div class="dashboard-info-wrapper">
	<div id="update-message"><?php echo language_translate('update_successfully_message');?></div>
	<div class="clear"></div>
</div> 

<?php $_SESSION['escort_id_profile'] = $escort_id;?>
 
<script type="text/javascript">
var EDIT = '<?php echo language_translate('pictures_videos_media_edit');?>';
var DELETED = '<?php echo language_translate('pictures_videos_media_deleted');?>';
var VIDEOID = '<?php echo language_translate('media_video_id');?>';

 function createImageUploader(){            
	var uploader = new qq.FileUploader({
		element: document.getElementById('image-file-uploader'),
		action: BASE_URI+'agent/escort/submit_image_file',
		debug: true,
		params: {escort_id:<?php echo $escort_id; ?>},
		onComplete: function(id, fileName, responseJSON){
			$.post(BASE_URI+'agent/async/loadAsyncVideosImages',{escort_id:<?php echo $escort_id;?>},function(res){
				$('#async_div_loading').html(res);
				processSortableDND();
			});
		},
	});           
}
$(document).ready(function() { 
	$('#button_add_new_image').live('click',function(){
		$('#greyDiv').removeClass('hidden');
		$.post(BASE_URI+'agent/async/load_image_upload_form',{pos:'image',escort_id:<?php echo $escort_id;?>},function(res){
			
			$('#hiddenElement').html(res);
			$('#hiddenElement').dialog(
				{
					 width: 550,
					 height:350 ,
					 draggable: false,
					 beforeClose: function(event, ui) { 
						$('#greyDiv').addClass('hidden');
					 },
					 close: function(event, ui) { reload(); },
					 title: siteLang.dialog_ui_title_media_management
				}
			);
			$('.ui-dialog').center();
			createImageUploader();
		 
		});
	});
	
	$('.media-item').live('click',function(){
		$id = $(this).attr('id');
		$('#greyDiv').removeClass('hidden');
		$.post(BASE_URI+'agent/async/media_manage_async',{id:$id},function(res){
			$('#hiddenElement').html(res);
			$('#hiddenElement').dialog(
				{
					 width: 650,
					 height:550 ,
					 draggable: false,
					 beforeClose: function(event, ui) { 
						$('#greyDiv').addClass('hidden');
					 },
					 title: siteLang.dialog_ui_title_media_management
				}
			);
			$('.ui-dialog').center();
		});
	});

	$('#image_face_censor').bind('click',function(){
		$val = $(this).val();
		if(!$val){
			$tmp = 1;
		}else{
			$tmp = '';
		}
		$(this).attr('value',$tmp);
		$.post(BASE_URI+'agent/async/image_face_censor',{value:$tmp,escort_id:<?php echo $escort_id;?>});
	});
	
});

function processSortableDND(){
	$( "#public_top_media" ).sortable();
	$( "#public_top_media" ).disableSelection();
	$( "#public_top_media" ).bind( "sortupdate", function(event, ui) {
		findFirstPublicMedia();
	});
	
	$( "#public_medias" ).sortable();
	$( "#public_medias" ).disableSelection();
	$( "#public_medias" ).bind( "sortupdate", function(event, ui) {
		findFirstPublicMedia();
	});
	
	$( "#private_medias" ).sortable();
	$( "#private_medias" ).disableSelection();
	$( "#private_medias" ).bind( "sortupdate", function(event, ui) {
		findFirstPublicMedia();
	});
	
	$( "#private_medias" ).bind( "sortstart", function(event, ui) {
		var id = ui.item[0].attributes.id.nodeValue ;
		var image = $('#private_medias #'+id).find('img').attr('src'); 
		sessionStorage.setItem('IMG_TEMP',image);  
	    sessionStorage.setItem('ID_TEMP',id); 
		sessionStorage.setItem('FROM_TEMP','#private_medias'); 
		sessionStorage.setItem('ITEM_TYPE',$('#'+id).attr('rel'));
	});
	
	$( "#public_medias" ).bind( "sortstart", function(event, ui) {
		var id = ui.item[0].attributes.id.nodeValue ;
		var image = $('#public_medias #'+id).find('img').attr('src'); 
		sessionStorage.setItem('IMG_TEMP',image);  
	    sessionStorage.setItem('ID_TEMP',id); 
		sessionStorage.setItem('FROM_TEMP','#public_medias'); 
		sessionStorage.setItem('ITEM_TYPE',$('#'+id).attr('rel'));
	});
	
	$( "#public_top_media" ).bind( "sortstart", function(event, ui) {
		var id = ui.item[0].attributes.id.nodeValue ;
		var image = $('#public_top_media #'+id).find('img').attr('src'); 
		sessionStorage.setItem('IMG_TEMP',image);  
	    sessionStorage.setItem('ID_TEMP',id); 
		sessionStorage.setItem('FROM_TEMP','#public_top_media'); 
		sessionStorage.setItem('ITEM_TYPE',$('#'+id).attr('rel'));
	});
	
	$( "#public_medias" ).droppable({
		drop: function( event, ui ) {
			if(sessionStorage.FROM_TEMP != '#public_medias'){
				$typeFrom = $(sessionStorage.FROM_TEMP+' #'+sessionStorage.ID_TEMP).attr('rel');
				$(sessionStorage.FROM_TEMP+' #'+sessionStorage.ID_TEMP).remove();
				if(sessionStorage.ITEM_TYPE == 'image'){
					$( "#public_medias" ).append('<div class="media-item ui-state-default" id="'+sessionStorage.ID_TEMP+'" rel="'+$typeFrom+'"><img src="'+sessionStorage.IMG_TEMP+'" /><div class="media-edit">'+EDIT+'</div></div>');
				}else{
					$( "#public_medias" ).append('<div class="media-item ui-state-default" id="'+sessionStorage.ID_TEMP+'" rel="'+$typeFrom+'"><img src="'+sessionStorage.IMG_TEMP+'" /><div class="media-edit">'+EDIT+'</div>'+'<div class="id-info">'+VIDEOID+sessionStorage.ID_TEMP+'</div></div>');
				}
			}
			findFirstPublicMedia();
		}
	});
	
	$( "#private_medias" ).droppable({
		drop: function( event, ui ) {  
			if(sessionStorage.FROM_TEMP != '#private_medias'){
				$typeFrom = $(sessionStorage.FROM_TEMP+' #'+sessionStorage.ID_TEMP).attr('rel');
				$(sessionStorage.FROM_TEMP+' #'+sessionStorage.ID_TEMP).remove();
				if(sessionStorage.ITEM_TYPE == 'image'){
					$( "#private_medias" ).append('<div class="media-item ui-state-default" id="'+sessionStorage.ID_TEMP+'" rel="'+$typeFrom+'"><img src="'+sessionStorage.IMG_TEMP+'" /><div class="media-edit">'+EDIT+'</div></div>');
				}else{
					$( "#private_medias" ).append('<div class="media-item ui-state-default" id="'+sessionStorage.ID_TEMP+'" rel="'+$typeFrom+'"><img src="'+sessionStorage.IMG_TEMP+'" /><div class="media-edit">'+EDIT+'</div>'+'<div class="id-info">'+VIDEOID+sessionStorage.ID_TEMP+'</div></div>');
				}
			}
			findFirstPublicMedia();
		}
	});
	
	$( "#public_top_media" ).droppable({
		drop: function( event, ui ) { 
			if(sessionStorage.FROM_TEMP != '#public_top_media'){
				/**
				$countOldElements = parseInt ( $('#public_top_media .media-item').size() );
				$typeFrom = $(sessionStorage.FROM_TEMP+' #'+sessionStorage.ID_TEMP).attr('rel');
				
				$(sessionStorage.FROM_TEMP+' #'+sessionStorage.ID_TEMP).remove();
				
				if($countOldElements ==1){
					$old_id_element = $('#public_top_media .media-item').attr('id');
					$old_image = $('#public_top_media #'+$old_id_element).find('img').attr('src'); 
					$type = $('#public_top_media #'+$old_id_element).attr('rel');
					
					if($type == 'image'){
						if($typeFrom == 'image'){
							$( "#public_top_media" ).append('<div class="media-item ui-state-default" id="'+sessionStorage.ID_TEMP+'" rel="image"><img src="'+sessionStorage.IMG_TEMP+'" /><div class="media-edit">'+EDIT+'</div></div>');
						}else if($typeFrom == 'video'){
							$( "#public_top_media" ).html('<div class="media-item ui-state-default" id="'+sessionStorage.ID_TEMP+'" rel="video"><img src="'+sessionStorage.IMG_TEMP+'" /><div class="media-edit">'+EDIT+'</div></div>');
							$( sessionStorage.FROM_TEMP ).append('<div class="media-item ui-state-default" id="'+$old_id_element+'" rel="image"><img src="'+$old_image+'" /><div class="media-edit">'+EDIT+'</div></div>');
						}
					}else if($type == 'video'){
						$( "#public_top_media" ).html('<div class="media-item ui-state-default" id="'+sessionStorage.ID_TEMP+'" rel="'+$typeFrom+'"><img src="'+sessionStorage.IMG_TEMP+'" /><div class="media-edit">'+EDIT+'</div></div>');
						$( sessionStorage.FROM_TEMP ).append('<div class="media-item ui-state-default" id="'+$old_id_element+'" rel="video"><img src="'+$old_image+'" /><div class="media-edit">'+EDIT+'</div></div>');
					}
				}else if($countOldElements > 1){
					//top image type: multi images
					if($typeFrom == 'image'){
						$( "#public_top_media" ).append('<div class="media-item ui-state-default" id="'+sessionStorage.ID_TEMP+'" rel="image"><img src="'+sessionStorage.IMG_TEMP+'" /><div class="media-edit">'+EDIT+'</div></div>');
					}else if($typeFrom == 'video'){
						$oldElementHtml = $( "#public_top_media" ).html();
						$( "#public_top_media" ).html('<div class="media-item ui-state-default" id="'+sessionStorage.ID_TEMP+'" rel="'+$typeFrom+'"><img src="'+sessionStorage.IMG_TEMP+'" /><div class="media-edit">'+EDIT+'</div></div>');
						$( sessionStorage.FROM_TEMP ).append( $oldElementHtml );
					}
				}else if($countOldElements == 0){
					$( "#public_top_media" ).append('<div class="media-item ui-state-default" id="'+sessionStorage.ID_TEMP+'" rel="'+$typeFrom+'"><img src="'+sessionStorage.IMG_TEMP+'" /><div class="media-edit">'+EDIT+'</div></div>');
				}
				**/
				$typeFrom = $(sessionStorage.FROM_TEMP+' #'+sessionStorage.ID_TEMP).attr('rel');
				$(sessionStorage.FROM_TEMP+' #'+sessionStorage.ID_TEMP).remove();
				if(sessionStorage.ITEM_TYPE == 'image'){
					$( "#public_top_media" ).append('<div class="media-item ui-state-default" id="'+sessionStorage.ID_TEMP+'" rel="'+$typeFrom+'"><img src="'+sessionStorage.IMG_TEMP+'" /><div class="media-edit">'+EDIT+'</div></div>');
				}else{
					$( "#public_top_media" ).append('<div class="media-item ui-state-default" id="'+sessionStorage.ID_TEMP+'" rel="'+$typeFrom+'"><img src="'+sessionStorage.IMG_TEMP+'" /><div class="media-edit">'+EDIT+'</div>'+'<div class="id-info">'+VIDEOID+sessionStorage.ID_TEMP+'</div></div>');
				}
			}
			findFirstPublicMedia();
		}
	});
	findFirstPublicMedia();
}

function findFirstPublicMedia(){
	$('#public_medias .media-item').removeClass('red-border');
	$id = $('#public_medias').find('.media-item[rel="image"]').first().attr('id');
	$('#public_medias #'+$id).addClass('red-border');
}
		
$(document).ready(function() { 
	var options2 = { 
		beforeSubmit:  validateB4SubmitAjaxform,  
		success:       processAfterRespondingAjaxform   
	};
	$("#submit_edit_media").live("submit",function(e){
		e.preventDefault(); // <-- important
		$(this).ajaxSubmit(options2);
		return false;
	});	

	processSortableDND();
	$('#button_save_action').click(function(){saveElements();});
});	

function saveElements(){
	$obj = {};
	$pos = ['public_top_media', 'public_medias', 'private_medias'];
	 
	for(var i=0;i<3;i++){
		$element = [];
		$("#"+$pos[i]+" .media-item").each(function(i,o){
			$element.push($(this).attr('id'));
		});
		$ids = $element ? $element.join(',') : '';
		eval("$obj."+$pos[i]+"='"+$ids+"';"); 
	}
	$('#save_loader_image').show();
	$.post(BASE_URI+'agent/async/re_ordering',$obj,function(res){
		$('#save_loader_image').hide();
		if(res == 'ok'){
			updatedShow();
		}else{
			debug(res);
		}
	});
}


function validateB4SubmitAjaxform(formData, jqForm, options){
	$('.loading_update_image').show();
	return true;
}

function processAfterRespondingAjaxform(responseText, statusText, xhr, $form) {
	$('.loading_update_image').hide();	
	if(responseText == 'ok'){
		updatedShow('message-status');
		$.post(BASE_URI+'agent/async/loadAsyncVideosImages',{escort_id:<?php echo $escort_id;?>},function(res){
			$('#async_div_loading').html(res);
			processSortableDND();
		});
	}else{
		debug(responseText);
	}
}

function deleteItem(id){
	$('.loading_update_image_delete').show();
	$.post(BASE_URI+'agent/async/delete_media',{id:id},function(res){
		$('#wrap-delete-item').remove();
		updatedShow('message-status');
		$('.message-status').html(DELETED);
		$('#'+id).remove();
	});
}
</script>	



